import { Form, Input, Modal, Spin } from 'antd';
import TextEditor from './TextEditor';
import { useEffect, useState } from 'react';

const UpdateAnnouncement = ({
  open,
  onCreate,
  onCancel,
  defaultInfor,
}) => {
  const [form] = Form.useForm();
  const [content, setContent] = useState(null)

  useEffect(()=>{
    setContent(null)
  },[defaultInfor])

  const contentChang = (data) => {
    setContent(data)
  }

  const itmes = [
    { name: "fd_title", label: "标题", span: 22,},
    { name: "fd_content", label: "内容", span: 22,}
  ]

  return (
    <Modal
      destroyOnClose
      width={950}
      open={open}
      okText={"修改"}
      cancelText="退出"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate({ ...defaultInfor, ...values, fd_content:content });
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      {
        !defaultInfor ? <Spin size='large' className='loading'></Spin> :
          <Form
            preserve={false}
            form={form}
            layout="horizontal"
            name="form_in_modal"
            wrapperCol={{
              span: 12,
            }}
            className="updata-user-infor"
          >
            {
              itmes.map(item => {
                return (
                  <Form.Item
                    key={item.name}
                    name={item.name}
                    label={item.label}
                    wrapperCol={{ span: item.span }}
                    initialValue={defaultInfor?.[item.name]}
                  >
                    {
                      item.name === "fd_title" ?
                        <Input /> :
                        <TextEditor data={defaultInfor?.[item.name]} onChangeValue={contentChang} />
                    }
                  </Form.Item>
                )
              })
            }
          </Form>
      }
    </Modal>
  );
};
export default UpdateAnnouncement